<template>
  <div
    :class="`home-content home-content-${skeletonLoading}`"
    :style="{ paddingBottom: `${defaultPaddingBottom}px` }"
  >
    <a-list bordered :data-source="antList" v-if="antList.length > 0">
      <div slot="header" v-if="false">{{ defaultTitle }}</div>
      <a-list-item
        :class="{ 'panel-tz': item.children }"
        slot="renderItem"
        slot-scope="item"
      >
        <template v-if="!item.children">
          <span class="ant-item-text">{{ item.text }}</span>
          <span class="nr">{{ item.vNodeSpan }}</span>
        </template>
        <template v-else>
          <div :class="`home-content-panel-children`">
            <div class="home-content-panel-children-title">
              {{ item.text ? item.text : "" }}
            </div>
            <a-list
              :data-source="item.children"
              class="home-content-panel-children-body"
            >
              <a-list-item slot="renderItem" slot-scope="item">
                <div class="home-content-item-children">
                  <span class="ant-item-text">{{ item.text }}</span>
                  <span class="nr">{{ item.vNodeSpan }}</span>
                </div>
              </a-list-item>
            </a-list>
          </div>
        </template>
      </a-list-item>
      <div slot="footer" class="footer" v-if="reason.text === ''">
        <span>{{ reason.text }}</span>
        <span class="nr">{{ reason.vNodeSpan }}</span>
      </div>
    </a-list>
    <div
      @click="isDrawerShow ? (isDrawerShow = false) : ''"
      :class="isDrawerShow ? 'sp-zhezhao' : ''"
    />
  </div>
</template>

<script lang="ts">
/*eslint-disable*/
import { Component, Vue, Prop, Emit } from "vue-property-decorator";
import { httpUrl } from "@/services/config/index.ts";
import { BASE_URL } from "@/utils/utils.ts";

@Component({
  name: "HomeContent",
  filters: {
    formatAssignInfo(names: string | null | undefined) {
      if (!names) {
        return "";
      }
      const reg = /[\u4e00-\u9fa5]+/g;
      const res = names.match(reg);
      if (res) {
        return res.toString();
      }
      return "";
    },
  },
})
export default class HomeContent extends Vue {
  public targetFileNow: { [key: string]: any } = {};
  public isDrawerShow = false;
  @Prop()
  antList;
  @Prop()
  history;
  @Prop({
    default: () => {
      return "";
    },
  })
  defaultTitle?: string;

  @Prop({
    default: () => {
      return "40";
    },
  })
  defaultPaddingBottom?: string | number;
  @Prop()
  skeletonLoading;
  @Prop()
  parentChange?: () => void;
  @Prop()
  filePageList: Array<any> | undefined;
  public http = httpUrl;
  public window = window;

  get reason() {
    return this.antList.map((item) => {
      for (const i in item) {
        if (i === "field" && item[i] === "reason") {
          return item;
        } else {
          return { text: "", vNodeSpan: "", ...item };
        }
      }
    });
  }

  actionClick({ file, record }: any) {
    // this.$message.success('文件操作')
    this.isDrawerShow = true;
    this.targetFileNow = file;
    // console.log(file, record)
  }

  drawActionClick(type: any) {
    const { targetFileNow } = this;
    console.log(targetFileNow);
    const clicKey = type.action.key;
    const { fileName, path } = targetFileNow;

    if (clicKey === "open") {
      var originUrl = `${BASE_URL}/project/downLoad?filePath=${path}&fileName=${fileName}`;
      // 要预览文件的访问地址
      // http://115.239.175.246:5003
      // http://127.0.0.1:8082
      var previewUrl = originUrl + `&fullfilename=${fileName}`;
      console.log(previewUrl);
      if (
        window.location.host.includes("115.239") ||
        window.location.host.includes("10.10") ||
        window.location.host.includes("192")
      ) {
        window.open(
          "http://115.239.175.246:5004/onlinePreview?url=" +
            encodeURIComponent(previewUrl)
        );
      } else if (window.location.host.includes("10.32")) {
        window.open(
          "http://10.32.205.10:8081/onlinePreview?url=" +
            encodeURIComponent(previewUrl)
        );
      } else {
        window.open(
          "http://10.40.88.26:8081/onlinePreview?url=" +
            encodeURIComponent(previewUrl)
        );
      }
    } else {
      const downUrl = `${BASE_URL}/project/downLoad?filePath=${path}&fileName=${fileName}&fullfilename=${fileName}`;
      window.location.href = downUrl;
    }
  }

  @Emit("downFile")
  downFile(item: { [key: string]: any }) {
    return item;
  }
}
</script>

<style scoped lang="scss">
.footer {
  display: flex;

  > span:first-child {
    flex: 1;
  }

  > span:last-child {
    flex: 1;
    text-align: right;
  }
}

.home-content-true {
  height: calc(100vh - 134px);
  overflow: hidden;
}

.home-content {
  overflow-y: auto;
  box-sizing: border-box;
  // margin: 5px 0;
  // min-height: calc(100vh - 280px);
  .ant-item-text {
    color: #333333;
  }
  /deep/ .ant-list-bordered .ant-list-item {
    padding: 12px;
  }
  .home-history {
    padding: 0 10px;
    background-color: #ffffff !important;
  }

  .ant-card {
    border-radius: 6px;
  }

  .home-content-panel-children-title {
    font-size: 19px;
    font-weight: bold;
    color: #333333;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 12px;
  }

  .home-content-panel-children {
    width: 100%;
    & {
      .ant-list-item {
        padding: 12px 0;
      }
    }
  }

  .ant-card /deep/ .ant-card-body {
    padding: 0;
  }

  // .ant-card /deep/ .ant-card-meta {
  //   border-bottom: 1px solid #e8e8e8;
  //   padding: 8px;
  // }

  .ant-card /deep/ .ant-card-meta-title {
    font-size: 12px;
    margin-bottom: 0;
    color: #409eff;
  }

  .ant-card /deep/ .ant-card-meta-description {
    font-size: 12px;
  }

  .ant-list-bordered {
    border-radius: 2px;
  }

  .ant-list-bordered /deep/ .ant-list-header,
  .ant-list-bordered /deep/ .ant-list-fooer,
  .ant-list-bordered /deep/ .ant-list-item {
    background: white;
    // margin-bottom: 7px;
    color: black;
  }

  .ant-list-bordered {
    border: none;

    /deep/ .ant-list-header {
      font-size: 18px;
    }
  }

  .ant-collapse {
    border-radius: 0;
    border: 0;

    .ant-collapse-item {
      background: white;
      border-bottom: unset;
    }
  }
}

.home-content /deep/ .ant-tabs-nav {
  width: 100%;
  text-align: center;

  > div {
    display: flex;

    .ant-tabs-tab {
      flex: 1;
    }
  }
}

* /deep/ {
  .history-file {
    padding: 0 5px;

    h4 {
      margin-bottom: 0;
    }
  }
}

.nr {
  color: #999;
  text-align: right;
}

/deep/ .ant-collapse-borderless {
  width: 100%;
}

.home-content-item-children {
  width: calc(100%);
  height: 100%;
  display: flex;
  justify-content: space-between;
}

.sp-zhezhao {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.267);
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 88;
}
.panel-tz {
  margin: 7px 0;
}
/deep/ .ant-list-items {
  & .ant-list-item:last-child {
    margin-bottom: 7px;
  }
}
</style>
